<template>
    <view>
        <uv-popup ref="popup" mode="bottom" closeable :safeAreaInsetBottom="false" round="1em">
            <view class="h-72 px-4 py-10 bg-blackxlight">
                <view class="text-whitexlight text-lg text-center">
                    更新信息
                </view>
                <!-- #ifdef MP-WEIXIN -->
                <view class="flex flex-col w-full px-4 box-border">
                    <input @blur="onNicknameChange"
                        class="placeholder:text-whitex text-whitex my-4 py-2 px-4 rounded-2xl text-sm bg-blackx"
                        :value="nickname" type="nickname" placeholder="请输入您的昵称" />
                </view>
                <!-- #endif -->
                <!-- #ifndef MP-WEIXIN -->
                <view class="flex flex-col w-full px-4 box-border">
                    <input v-model="form.nickname"
                        class="placeholder:text-whitex text-whitex my-4 py-2 px-4 rounded-2xl text-sm bg-blackx"
                        :value="nickname" type="text" placeholder="请输入您的昵称" :show-confirm-bar="false" />
                </view>
                <!-- #endif -->
                <view class="w-full box-border px-8 mt-4">
                    <view class="bg-bluex text-whitex font-extrabold box-border rounded-full text-center p-2"
                        @click="onChange">
                        确认
                    </view>
                </view>
            </view>
        </uv-popup>
    </view>
</template>

<script>
    import {
        events
    } from '../../consts/events';
    import {
        userUpdate
    } from '../../http/api';

    export default {
        name: "editNicknamePopup",
        props: {
            nickname: {
                type: String,
                default: "",
            }
        },
        data() {
            return {
                form: {
                    nickname: ""
                },
            };
        },
        methods: {
            onNicknameChange(e) {
                console.log(e);
                this.form.nickname = e.detail.value
            },
            async onChange() {
                console.log(this.form.nickname);
                let res = await userUpdate(this.form)
                if (res.code == 0) {
                    uni.showToast({
                        icon: 'none',
                        title: res.message,
                    })
                    return
                }
                this.$refs.popup.close()
                uni.showToast({
                    icon: "success",
                    title: res.message,
                })
                this.$emit(events.nicknameUpdated, this.form)
            },
            open() {
                this.$refs.popup.open()
            }
        },
    }
</script>

<style>

</style>